<template>
  <div>
    <el-button type="success" round @click="fn">点我</el-button>
    <hr/>
    <input v-model="msg" placeholder="请输入内容">
    <hr/>
    <el-button type="success" round @click="debounceFn">点我</el-button>
    <hr/>
    <p>{{ value ? '好': '坏' }}</p>
    <el-button type="success" round @click="toggle()">切换</el-button>
  </div>
</template>

<script setup>
import { useDebounceFn, useThrottleFn, useToggle } from '@vueuse/core'
import { ref } from 'vue'

const msg = ref('')

const fn = () => {
  setTimeout(() => {
    throttledFn()
  }, 3000)
}
// 节流
const throttledFn = useThrottleFn(() => {
  console.log(msg.value)
}, 3000)

// 防抖
const debounceFn = useDebounceFn(() => {
  console.log('hhhh')
}, 1000)

const [ value, toggle ] = useToggle()

</script>
